<template>
  <div class="container">
    <h1>所有的讲师的列表</h1>

    <el-form ref="trainerQueryVo" :model="queryDto" :inline="true" label-width="120px">
      <el-form-item label="培训师姓名:">
        <el-input v-model="queryDto.name"></el-input>
      </el-form-item>

      <el-form-item label="培训师头衔:">
        <el-input v-model="queryDto.level"></el-input>
      </el-form-item>

      <el-form-item label="上课时间:">
        <el-date-picker
          v-model="dateRanges"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchTrainer">搜索</el-button>
        <router-link to="/trainer/add">
          <el-button class="mybtn" type="primary" icon="el-icon-circle-plus">添加培训师</el-button>
        </router-link>

        <el-button type="danger" icon="el-icon-delete" @click="deleteAll">批量删除</el-button>

      </el-form-item>
    </el-form>

    <el-table
      :data="trainers"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        label="编号"
        prop="id">
      </el-table-column>

      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>

      <el-table-column
        label="简介"
        prop="intro"
        width="150px">
      </el-table-column>

      <el-table-column
        label="经历"
        prop="career">
      </el-table-column>

      <el-table-column
        label="等级"
        prop="level">

        <template slot-scope="scope">
          <el-tag
            type='success'>
            {{tags[scope.row.level]}}
          </el-tag>
        </template>

      </el-table-column>

      <el-table-column
        label="头像"
        align="center"
        prop="avatar">
        <template slot-scope="scope">
          <el-image
            style="height: 135px"
            :src="scope.row.avatar">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column
        label="入驻时间"
        prop="createTime">
      </el-table-column>

      <el-table-column
        label="结束时间"
        prop="updateTime">
      </el-table-column>

      <!--
          路由传参: 路由跳转的时候 携带参数到 指定的页面
          进行字符串的拼接:  路由后面拼接参数
          router/index.js 下面: 路由/:xx   (传递参数的表达式)
          <router-link :to="'scope/trainer/edit/'+.row.id">
          vue 的语法会自动,解析 + 字符串的表达式
          /trainer/edit/2
          拿到参数:
          this.$route.params.id;
      -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/trainer/edit/'+scope.row.id">
            <el-button type="primary" icon="el-icon-circle-plus">编辑</el-button>
          </router-link>
          <el-button
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>

  //导入 xx.js 文件

  import trainer from "@/api/trainer";

  /**
   *
   *  这个前端框架中的 发送所有的http请求都封装到了 api下面的js文件中
   *  1、在api下面写xx.js 文件
   *  2、在组件中 需要 导入 xx.js文件
   *  3、调用xx.js 文件中的方法
   *
   */
  export default {

    name: "index",
    //绑定数据模型
    data() {
      return {
        currentPage: 1,
        pageSize: 2,
        queryDto: {},
        trainers: [],
        total: 0,
        tags: ["黄金", "钻石", "王者"],
        dateRanges: [],
        chbs: [],
        selectIds: []
      }
    },

    //触发的函数
    methods: {

      //选中 checkbox 会触发的 函数
      handleSelectionChange(vals) {
        this.chbs = vals;
      },

      //批量删除
      deleteAll() {
        this.selectIds.length = 0;
        if (!this.chbs) {
          alert("需要选中数据");
          return;
        }

        //选中的数据是否合法
        console.log(this.chbs);
        //拿到选中的数据
        for (let i = 0; i < this.chbs.length; i++) {
          this.selectIds.push(this.chbs[i].id);
        }

        //发送是数据是否合法
        console.log(this.selectIds)

        this.$confirm('此操作将永久删除该数据, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          //axios 的数据发送 是异步
          trainer.removeTrainerBatch(this.selectIds).then(resp => {
            this.$message({
              type: 'success',
              message: resp.message
            });
            // 更新数据
            this.getList();
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //搜索讲师
      searchTrainer() {

        //条件查询的 数据封装到了 queryDto 对象中了
        console.log(this.dateRanges);

        this.queryDto.createTimeStart = this.dateRanges[0];
        this.queryDto.createTimeEnd = this.dateRanges[1];

        //搜索
        this.getList();

      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList();
      },

      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },

      //删除
      handleDelete(index, obj) {
        let id = obj.id;
        this.$confirm('此操作将永久删除该数据, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          trainer.removeTrainerById(id).then(resp => {
            //消息提示
            this.$message({
              type: 'success',
              message: resp.message
            });
            // 更新数据
            this.getList();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //编辑
      handleEdit(index, obj) {

      },
      getList() {
        trainer.getList(this.currentPage, this.pageSize, this.queryDto).then(resp => {
          console.log(resp);
          this.trainers = resp.data.data;
          this.total = resp.data.total;
        })
      }
    },
    //初始化数据的操作
    created() {
      this.getList();
    }
  }

</script>

<style scoped>

  .container {
    padding: 8px;
  }

  .mybtn {
    margin-left: 10px;
  }

</style>
